import {FC,useState,useEffect} from 'react'
import {Form,Input,Button,Space,Modal} from 'antd'
import {CopyTwoTone} from '@ant-design/icons'
import { useNavigate,useSearchParams,useLocation} from 'react-router-dom'
import Styles from './index.module.scss' 
const {TextArea} = Input

type PropsType = {
  assetInfo:{[key:string]:any}
}

const AssetSearch: FC<PropsType> = (props:PropsType) => {

    const {assetInfo} = props
    const [form] = Form.useForm(); // 表单
    const nav = useNavigate()
    const {pathname} = useLocation()
    const [searchParams] = useSearchParams()
    const [open, setOpen] = useState(false);

    useEffect(()=>{
     // 获取路由参数
     const search = searchParams.get("search") || ""
     form.setFieldsValue({
        search
     })
    },[])

    // 搜索按钮
    const onFinish = (values: any) => {
        // 修改路由参数
        searchParams.set("page","1")
        searchParams.set("search",values.search || "")
          // 跳转路由
          nav({
            pathname,
            search:searchParams.toString()
        })
      }
    const onBlur = ()=>{
      const search = form.getFieldValue('search')
        // 修改路由参数
        searchParams.set("page","1")
        searchParams.set("search",search || "")
        // 跳转路由
        nav({
          pathname,
          search:searchParams.toString()
        }) 
    }
  return (
    <div >
    <Form className={Styles.search} form={form} onFinish={onFinish} onBlur={onBlur} >
        <Form.Item name="search" label="资产名称" className={Styles.item}>
            <Input  />
        </Form.Item>
        <Form.Item className={Styles.item}>
          <Space>
            <Button type="primary" htmlType='submit'>搜索</Button>
            <Button type="default" onClick={()=>{setOpen(true)}}>导出</Button>
          </Space>
        </Form.Item>
    </Form>
    {/* 资产详情 */}
    <Modal
        title="导出资产列表"
        centered
        open={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
        width={1000}>
      <div style={{position:"relative"}}>
      <TextArea   rows={40} autoSize={{ minRows: 40, maxRows: 40 }} value={JSON.stringify(assetInfo,null, 4)} />
      <Button type="text" style={{position:"absolute",right:20,top:20,zIndex:10}} icon={ <CopyTwoTone />}></Button>
      </div>
    </Modal>
</div>
)}

export default AssetSearch